import React, { useState } from 'react';
import Card from '../UI/card/Card'

const logFrom = (props) => {
  const [formData, setFormFata] = useState({
    inputDate: '',
    inputDesc: '',
    inputTime: ''
  })

  // 日期
  const dateChange = (e) => {
    // setInputDate(e.target.value)
    setFormFata({
      ...formData,
      inputDate: e.target.value
    })
  }
  // 内容
  const descChange = (e) => {
    setFormFata({
      ...formData,
      inputDesc: e.target.value
    })
  }
  // 时长
  const timeChange = (e) => {
    setFormFata({
      ...formData,
      inputTime: e.target.value
    })
  }
  // submit
  const submitHandler = (e) => {
    e.preventDefault()
    let params = {
      date: formData.inputDate,
      desc: formData.inputDesc,
      time: formData.inputTime
    }
    props.saveLogsData(params)
    console.log('params',params)
    setFormFata({
      inputDate: '',
      inputDesc: '',
      inputTime: ''
    })
  }
  return (
    <div>
      <Card>
        <form onSubmit={submitHandler}>
          <div>
            <label htmlFor='date'>日期</label>
            <input type="date" value={formData.inputDate} onChange={dateChange} id='date'/>
          </div>
          <div>
            <label htmlFor='desc'>内容</label>
            <input type="text" value={formData.inputDesc} onChange={descChange} id='desc'/>
          </div>
          <div>
            <label htmlFor='number'>时长</label>
            <input type="number" value={formData.inputTime} onChange={timeChange} id='number'/>
          </div>
          <button>添加</button>
        </form>
      </Card>
    </div>
  );
};

export default logFrom;